import React, {useState, useEffect} from 'react';
import { Button, Form, Input, Select, Space } from 'antd';
import PropTypes from 'prop-types';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import api from '../../../api/index';

import style from './Filter.module.scss';

const { Option } = Select;

const areas = [
    {
      label: 'Beijing',
      value: 'Beijing',
    },
    {
      label: 'Shanghai',
      value: 'Shanghai',
    },      
];
const sights = {
    Beijing: ['Tiananmen', 'Great Wall'],
    Shanghai: ['Oriental Pearl', 'The Bund'],
};

const Filter = (props) => {
    const {setFilterShow} = props;

    const [cities, setCities] = useState([]);
    const [secondCity, setSecondCity] = useState([]);
    const [filterPanelShow, setFilterPanelShow] = useState(true);           // 筛选面板显隐

    const [form] = Form.useForm();

    useEffect( async() => {
        const params = {
            admin: '象山县'
        };

        const adminResult = await api.search.queryAdmin(params);
        const {feature=[], infocode} = adminResult;
        
        if(infocode === 10000){
            const citys = feature.map(item => {
                return{
                    label: item,
                    value: item
                }
            });
            setCities(citys);
        }
    },[]);

    const onFinish = (values) => {
        setFilterPanelShow(false);
        setFilterShow(false);
    };

    // 关闭过滤面板
    const closeFilterPanel = () => {
        setFilterShow(false);
    };

    // 图层切换事件
    const layerChange = (val) => {
        console.log(val);
    };

    // 根据镇请求对应村数据
    const cityChange = async(val) => {
        const params = {
            admin: val
        };
        const adminResult = await api.search.queryAdmin(params);
        const {feature=[], infocode} = adminResult;
        
        if(infocode === 10000){
            const citys = feature.map(item => {
                return{
                    label: item,
                    value: item
                }
            });
            setSecondCity(citys);
        }
    };

    const getCityOptions = cities.map(city => {
        return <Option value={city.label} key={city.value}>{city.value}</Option>
    });

    const getSecondCityOptions = secondCity.map(city => {
        return <Option value={city.label} key={city.value}>{city.value}</Option>
    });
    
    return (
        <>
            {
                filterPanelShow && 
                <div className={style.filterBox}>
                    <div className={style.header}>
                        <span>筛选</span>
                        <i className="iconfont icon-close" onClick={closeFilterPanel}></i>
                    </div>
                    <div className={style.content}>
                        <Form form={form} name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off" layout="vertical">
                            <Form.Item name="layer" label="图层">
                                <Select options={areas} onChange={layerChange} />
                            </Form.Item>
                            <Form.Item label="区域">
                                <Input.Group compact>
                                    <Form.Item
                                        name={['address', 'province']}
                                        noStyle
                                    >
                                        <Select placeholder="请选择镇" style={{ width: 164, marginRight: 8 }} onChange={cityChange}>
                                            {getCityOptions}
                                        </Select>
                                    </Form.Item>
                                    <Form.Item
                                        name={['address', 'city']}
                                        noStyle
                                    >
                                        <Select placeholder="请选择村" style={{ width: 164 }}>
                                            {getSecondCityOptions}
                                        </Select>
                                    </Form.Item>
                                </Input.Group>
                            </Form.Item>
                            <div className={style.areaTitle}>面积过滤</div>
                            <Form.List name="sights">
                                {(fields, { add, remove }) => (
                                <>
                                    {fields.map((field) => (
                                    <Space key={field.key} align="baseline">
                                        <Form.Item
                                            noStyle
                                            shouldUpdate={(prevValues, curValues) =>
                                                prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
                                            }
                                        >
                                        {() => (
                                            <Form.Item
                                                {...field}
                                                label=""
                                                name={[field.name, 'sight']}
                                                rules={[
                                                    {
                                                    required: true,
                                                    message: 'Missing sight',
                                                    },
                                                ]}
                                                >
                                                <Select
                                                    style={{ width: 100, marginRight: 8 }}
                                                >
                                                    {(sights[form.getFieldValue('area')] || []).map((item) => (
                                                        <Option key={item} value={item}>
                                                            {item}
                                                        </Option>
                                                    ))}
                                                </Select>
                                            </Form.Item>
                                        )}
                                        </Form.Item>
                                        <Form.Item
                                            {...field}
                                            label=""
                                            name={[field.name, 'price']}
                                            rules={[
                                                {
                                                required: true,
                                                message: 'Missing price',
                                                },
                                            ]}
                                            >
                                            <Input />
                                        </Form.Item>

                                        <MinusCircleOutlined onClick={() => remove(field.name)} />
                                    </Space>
                                    ))}

                                    <Form.Item>
                                        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                            面积(公顷)
                                        </Button>
                                    </Form.Item>
                                </>
                                )}
                            </Form.List>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    确定
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                    {/* <div className={style.bottom}>
                        <span className={style.sure} onClick={search}>确定</span>
                    </div> */}
                </div>
            }
        </>
    )
};

Filter.propTypes = {
    setFilterShow: PropTypes.func
};

export default Filter;